<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>${alert}
  	<style>
  		.toolDiv {
  			padding-top:8px;
  		}
  		.alert {
		    display: none;
		}
  	</style>
  	<link href="assets/css/prettify.css" rel="stylesheet" />
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">브랜드 검색</h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">검색조건 펼치기/접기</a>
			</div>
		</div>
		
		<div id="searchdiv">
			<div class="clearfix">
				<div class="pull-left toolDiv">
					<div class="btn-toolbar">
			    		<div class="btn-group">
			    			<a href="listBrand.do?search=1&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㄱ</button></a>
			    			<a href="listBrand.do?search=2&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㄴ</button></a>
			    			<a href="listBrand.do?search=3&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㄷ</button></a>
			    			<a href="listBrand.do?search=4&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㄹ</button></a>
			    			<a href="listBrand.do?search=5&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅁ</button></a>
			    			<a href="listBrand.do?search=6&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅂ</button></a>
			    			<a href="listBrand.do?search=7&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅅ</button></a>
			    			<a href="listBrand.do?search=8&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅇ</button></a>
			    			<a href="listBrand.do?search=9&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅈ</button></a>
			    			<a href="listBrand.do?search=10&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅊ</button></a>
			    			<a href="listBrand.do?search=11&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅋ</button></a>
			    			<a href="listBrand.do?search=12&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅌ</button></a>
			    			<a href="listBrand.do?search=13&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅍ</button></a>
			    			<a href="listBrand.do?search=14&pageCnt=${pageCnt}"><button type="button" class="btn btn-defalut">ㅎ</button></a>
			    		</div>
			    		<div class="btn-group">
			    			<a href="listBrand.do?search=15&pageCnt=${pageCnt}"><button type="button" id="english" name="english" class="btn btn-defalut">a~z</button></a>
			    		</div>
			    		<div class="btn-group">
			    			<a href="listBrand.do?search=16&pageCnt=${pageCnt}"><button type="button" id="num" name="num" class="btn btn-defalut">0~9</button></a>
			    		</div>
			    		<div class="btn-group">
			    			<a href="listBrand.do?search=17&pageCnt=${pageCnt}"><button type="button" id="num" name="num" class="btn btn-defalut">etc</button></a>
			    		</div>
			    	</div>
		    		
		    	</div>
		    	
		    	<div class="pull-right">
		    		<form class="navbar-form navbar-right hidden-xs hidden-sm" role="search" method="get" action="listBrand.do">
		    			<input type="hidden" name="pageCnt" value="${pageCnt}"/>
						<div class="form-group">
							<input type="text" class="form-control" name="brandTitle" autocomplete="off" placeholder="브랜드명" value="${searchBrandTitle}"/>
						</div>
						<button type="submit" class="btn btn-default">검색</button>
					</form>
				</div>
			</div>
			<hr/>
		</div>
		
		<span class="pull-left" style="margin-bottom:10px;">등록 : ${page.totalArticleCount}건 / 활성 : ${display}건 / 비활성 : ${unDisplay}</span>
		<div class="dropdown clearfix">
			<a id="dropdownMenu2" href="#" role="button" class="dropdown-toggle pull-right" data-toggle="dropdown">페이징 <b class="caret"></b></a>
			<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
				<li role="presentation"><a role="menuitem" tabindex="-1" href="listBrand.do?pageCnt=10${where}${order}">10개씩</a></li>
				<li role="presentation"><a role="menuitem" tabindex="-1" href="listBrand.do?pageCnt=20${where}${order}">20개씩</a></li>
				<li role="presentation"><a role="menuitem" tabindex="-1" href="listBrand.do?pageCnt=30${where}${order}">30개씩</a></li>
				<li role="presentation"><a role="menuitem" tabindex="-1" href="listBrand.do?pageCnt=40${where}${order}">40개씩</a></li>
				<li role="presentation"><a role="menuitem" tabindex="-1" href="listBrand.do?pageCnt=50${where}${order}">50개씩</a></li>
			</ul>
		</div>
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">번호</th>
						<th class="text-center col-md-1">브랜드명</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isCreate'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnCreate${where}">등록일 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isCreate${where}">등록일 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isProduct'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnProduct${where}">제품수 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isProduct${where}">제품수 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isLogo'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnLogo${where}">로고 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isLogo${where}">로고 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isHomepage'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnHomepage${where}">홈페이지 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isHomepage${where}">홈페이지 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isFacebook'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnFacebook${where}">페이스북 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isFacebook${where}">페이스북 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isTwiter'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnTwiter${where}">트위터 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isTwiter${where}">트위터 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isKakao'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnKakao${where}">카카오톡 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isKakao${where}">카카오톡 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isYouTube'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnYouTube${where}">유투브 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isYouTube${where}">유투브 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">연락처</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isDisplay'}"><a href="listBrand.do?pageCnt=${pageCnt}&order=isUnDisplay${where}">전시여부 ▲</a></c:when>
								<c:otherwise><a href="listBrand.do?pageCnt=${pageCnt}&order=isDisplay${where}">전시여부 ▼</a></c:otherwise>
							</c:choose>
						</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${brand}" var="list">
						<tr class="text-center row">
							<td class="col-md-1">${list.idBrand}</td>
							<td class="col-md-1"><a href="updateBrand.do?id=${list.idBrand}">${list.brandTitle}</a></td>
							<td class="col-md-1">${fn:substring(list.create_date, 0, 4)}-${fn:substring(list.create_date, 4, 6)}-${fn:substring(list.create_date, 6, 8)}</td>
							<td class="col-md-1">${list.productCount}</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.brandImg > 0}">Y</c:when>
									<c:otherwise>N</c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.brandUrl != null}">
										<a href="${list.brandUrl}" target="_blank"><span class="glyphicon glyphicon-ok"></span></a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.brandFacebook != null}">
										<a href="${list.brandFacebook}" target="_blank"><span class="glyphicon glyphicon-ok"></span></a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.twitter != null}">
										<a href="${list.twitter}" target="_blank"><span class="glyphicon glyphicon-ok"></span></a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.kakaotalk != null}">
										<a href="${list.kakaotalk}" target="_blank"><span class="glyphicon glyphicon-ok"></span></a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.youTube != null}">
										<a href="${list.youTube}" target="_blank"><span class="glyphicon glyphicon-ok"></span></a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">${list.tel}</td>
							<c:choose>
								<c:when test="${list.isDisplay == 1}">
									<td class="col-md-1">Y
										<a href="listBrand.do?pageCnt=${pageCnt}&page=${page.nowPage}&id=${list.idBrand}&isDisplay=${list.isDisplay}${where}${order}">
											<button type="button" class="btn btn-xs btn-defalut unDisplay">삭제</button>
										</a>
									</td>
								</c:when>
								<c:otherwise>
									<td class="col-md-1">N
										<a href="listBrand.do?pageCnt=${pageCnt}&page=${page.nowPage}&id=${list.idBrand}&isDisplay=${list.isDisplay}${where}${order}">
											<button type="button" class="btn btn-xs btn-primary display">승인</button>
										</a>
									</td>
								</c:otherwise>
							</c:choose>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="listBrand.do?pageCnt=${pageCnt}&page=${page.startPage-1}${where}${order}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="listBrand.do?pageCnt=${pageCnt}&page=${now}${where}${order}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="listBrand.do?pageCnt=${pageCnt}&page=${page.endPage+1}${where}${order}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>
		
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typehead/jquery.mockjax.js"></script>
    <script src="assets/js/typehead/bootstrap-typeahead.js"></script>
    
    <script>
    	$(function() {
    		
    		$.mockjax({
                url: '/cities/list',
                response: function() {
                	var typehead = $("input[name='brandTitle']").val();
                	var asdf = [{ name: '아나다'}, { name: 'Mark'}, { name: 'Jacob'}];
                	$.ajax({
    					url: "ajax/brandJson.jsp",
    					data: "typehead=" + typehead,
    					dataType: "text",
    					timeout: 30000,
    					cache: false,
    					async: false,
    					success: function(req) {
    						asdf = eval(req);
    					},
    					error: function(xhr, status, error) {
    						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
    					}
    				});
                    this.responseText = asdf;
                }
            });

    		$("input[name='brandTitle']").typeahead({
                ajax: '/cities/list'
            });
    	});
    </script>
    
	<script>
		$(function() {
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
			
			$(".unDisplay").click(function() {
				if (!confirm("정말 비활성처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$(".display").click(function() {
				if (!confirm("정말 승인처리 하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
  </body>
</html>